<template>
	<div class="query-case-container">
		<el-card shadow="hover" body-style="padding:8px; ">
			<el-form :inline="true" :model="formInline" size="mini">
				<el-row>
					<el-col :span="24">
						<el-form-item label-width="100px" label="案件编号">
							<el-input v-model="formInline.caseNo" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="警情编号">
							<el-input v-model="formInline.inspectionNo" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="案件名称">
							<el-input v-model="formInline.caseName" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="案发时间">
							<el-date-picker
								style="width: 220px"
								format="YYYY-MM-DD"
								value-format="YYYY-MM-DD"
								v-model="formInline.caseTimeAll"
								type="daterange"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
							>
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label-width="100px" label="案件类别">
							<el-select filterable v-model="formInline.caseTypeName" placeholder="请选择...">
								<el-option label="请选择" value=""></el-option>
								<el-option v-for="item in options.ajlbs" :key="item.label" :label="item.label" :value="item.label"> </el-option>
							</el-select>
						</el-form-item>
						<el-form-item label-width="100px" label="主办人">
							<el-input v-model="formInline.hostUserName" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="主办单位">
							<el-input v-model="formInline.hostUserOrganName" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="案发地点">
							<el-input v-model="formInline.casePlace" placeholder="请输入..."></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label-width="100px" label="简要案情">
							<el-input v-model="formInline.briefCase" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="单位名称">
							<el-cascader style="width:100%;" v-model="formInline.formOrganId" :options="organData" :props="{checkStrictly:true}" ref="refelOrgan" clearable placeholder="请选择..." />
						</el-form-item>
						<el-form-item style="margin-left: 20px">
							<el-button type="primary" @click="init" icon="el-icon-search" size="small">查询</el-button>
							<el-button type="primary" @click="onRest" icon="el-icon-view" size="small">重置</el-button>
							<el-button type="success" plain @click="onExportExcel" icon="el-icon-document" size="small">导出</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-table
				id="tableCaseExcel" border
				ref="multipleTable"
				:data="tableData"
				:default-sort="{ prop: 'name', order: 'descending' }"
				:row-style="{ height: '40px' }"
				:cell-style="{ padding: '0' }"
				size="medium"
				style="width: 100%"
				highlight-current-row
			>
				<el-table-column align="center" label="序号" type="index" width="60"> </el-table-column>
				<el-table-column align="center" property="caseNo" sortable prop="caseNo" label="案件编号" show-overflow-tooltip />
				<el-table-column align="center" property="inspectionNo" sortable prop="inspectionNo" label="警情编号" show-overflow-tooltip />
				<el-table-column align="center" property="caseName" sortable label="案件名称" show-overflow-tooltip />
				<el-table-column align="center" property="caseTypeName" sortable label="案发类别" show-overflow-tooltip />
				<el-table-column align="center" property="caseTime" sortable label="案发时间" show-overflow-tooltip>
					<template #default="scope">{{ `${dateFormat(scope.row.caseTime)}` }}</template>
				</el-table-column>
				<el-table-column align="center" property="hostUserName" sortable label="主办人" show-overflow-tooltip />
				<el-table-column align="center" property="hostUserOrganName" sortable label="主办单位" show-overflow-tooltip />
				<el-table-column align="center" property="casePlace" sortable label="案发地点" show-overflow-tooltip />
				<el-table-column align="center" property="briefCase" sortable label="简要案情" show-overflow-tooltip />
				<el-table-column align="center" label="操作">
					<template #default="scope">
						<el-button type="success" @click="onDetailsInfo(scope.row)" plain size="mini">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:page-sizes="[100, 200, 300, 400]"
				:page-size="10"
				layout="prev, pager, next, jumper,total,sizes"
				:total="total"
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				prev-text="上一页"
				next-text="下一页"
				background
			>
			</el-pagination>
		</el-card>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, computed } from 'vue';
import { ElMessageBox } from 'element-plus';
import { useStore } from '/@/store/index';
import { getOrganTree  } from '/@/api/statistics/index';
import { useRouter } from 'vue-router';
import { queryCase } from '/@/api/query/index';
import { exportExcelFromJson } from '/@/common/excel';
import { initDic } from '/@/common';
import { dateFormat } from '/@/common/index';

export default {
	name: 'queryCase',
	components: {},
	setup(prop, context) {
		const store = useStore();
		const router = useRouter();
		const refelOrgan = ref();
		const multipleTable = ref();
		const state = reactive({
			total: 0,
			options: { ajlbs: [] },
			organData: [],
			formInline: {
				page: 1,
				pageSize: 10,
				id: 0,
				caseNo: '',
				inspectionNo: '',
				caseName: '',
				caseTypeCode: '',
				caseTypeName: '',
				caseTimeAll: null,
				caseTimeStart: null,
				caseTimeEnd: null,
				createTimeStart: null,
				createTimeEnd: null,
				casePlace: '',
				hostUserId: 0,
				eviHostName: router.currentRoute.value.query.hostname,
				hostUserOrgan: router.currentRoute.value.query.hostOrgan || 0,
				hostUserOrganName: '',
				briefCase: '',
				currentOrganId:0,
				formOrganId:0,
				inputOrganId:router.currentRoute.value.query.organId || 0,
				ty:router.currentRoute.value.query.ty,
				orgType:router.currentRoute.value.query.orgType || 0,
			},
			tableData: [],
		});
		getOrganTree({}).then((res: any) => {
			if (res.success) {
				state.organData = [res.data];
			}
		});
		async function init() {
			state.formInline.caseTimeStart = null;
			state.formInline.caseTimeEnd = null;
			if (state.formInline.caseTimeAll && state.formInline.caseTimeAll.length > 1) {
				state.formInline.caseTimeEnd = state.formInline.caseTimeAll[1];
				state.formInline.caseTimeStart = state.formInline.caseTimeAll[0];
			}
			if(router.currentRoute.value.query.rbegin){
				//如统计分析页面跳转过来的
				state.formInline.createTimeStart = router.currentRoute.value.query.rbegin;
			}
			if(router.currentRoute.value.query.rend){
				//如统计分析页面跳转过来的
				state.formInline.createTimeEnd = router.currentRoute.value.query.rend;
			}
			if(router.currentRoute.value.query.tbegin){
				//如统计分析页面跳转过来的
				state.formInline.caseTimeStart = router.currentRoute.value.query.tbegin;
			}
			if(router.currentRoute.value.query.tend){
				//如统计分析页面跳转过来的
				state.formInline.caseTimeEnd = router.currentRoute.value.query.tend;
			}
			if (refelOrgan.value && refelOrgan.value.getCheckedNodes().length > 0) {
				state.formInline.currentOrganId = Number(refelOrgan.value.getCheckedNodes()[0].value);
			}
			else if(state.formInline.currentOrganId == null){
				state.formInline.currentOrganId = 0;
			}
			await queryCase(state.formInline).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.total = res.data.totalCount;
				}
			}); 
		}

		function onRest() {
			state.formInline.caseNo = '';
			state.formInline.inspectionNo = '';
			state.formInline.caseName = '';
			state.formInline.caseTypeName = '';
			state.formInline.caseTimeAll = null;
			state.formInline.caseTimeStart = null;
			state.formInline.caseTimeEnd = null;
			state.formInline.casePlace = '';
			state.formInline.hostUserId = 0;
			state.formInline.hostUserName = '';
			state.formInline.hostUserOrgan = 0;
			state.formInline.hostUserOrganName = '';
			state.formInline.briefCase = '';
			state.formInline.currentOrganId = 0;
			state.formInline.formOrganId = 0;
		}

		const onDetailsInfo = (row: any) => {
			router.push({
				path: '/evidence/unit/details',
				query: { caseid: row.id },
			});
		};

		const onHandleCurrentChange = (page) => {
			state.formInline.page = page;
			init();
		};

		const onHandleSizeChange = (pageIndex) => {
			state.formInline.pageSize = pageIndex;
			init();
		};

		const onExportExcel = () => {
			let header = [
				'序号',
				'案件编号', 
				'警情编号', 
				'案件名称', 
				'案发类别', 
				'案发时间', 
				'主办人', 
				'主办单位', 
				'案发地点', 
				'简要案情'
			];
			let data = state.tableData.map((item: any, index: number) => {
				return {
					'序号':index + 1,
					'案件编号':item.caseNo,
					'警情编号':item.inspectionNo,
					'案件名称':item.caseName,
					'案发类别':item.caseTypeName,
					'案发时间':item.caseTime?.substring(0,10),
					'主办人':item.hostUserName,
					'主办单位':item.hostUserOrganName,
					'案发地点':item.casePlace,	
					'简要案情':item.briefCase
				};	
			});
			exportExcelFromJson(data, header, '案件数据', '查询-案件数据列表.xlsx');
		};
		initDic(state.options);
		init();

		return {
			init,
			onRest,
			dateFormat,
			onExportExcel,
			onDetailsInfo,
			onHandleCurrentChange,
			onHandleSizeChange,
			refelOrgan,
			multipleTable,
			...toRefs(state),
		};
	},
};
</script>

<style scoped>
.el-input,
.el-select,
.el-date-picker {
	width: 220px;
}
</style>
